<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-09-监视属性</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>今天天气很{{ info }}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr>
    <h2>a 的值是：{{ number.a }}</h2>
    <button @click="number.a++">点击我让 a + 1</button>
</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            isHot: true,

            number: {
                a: 0,
                b: 100,
            },
        },

        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            },
        },

        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            },
        },

        watch: {
            // isHot 函数什么时候被调用？当 isHot 值被修改后调用
            isHot: {
                handler(newValue, oldValue) {
                    alert('isHot值被修改了')
                }
            },
        }
    })
</script>
</body>
</html>